<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>#(APP.name) - 用户注册</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    #include("/template/common/include/_css.html")
    <link rel="stylesheet" href="../static/css/register/style/admin.css" media="all">
    <link rel="stylesheet" href="../static/css/register/style/login.css" media="all">
    <script src="../static/js/jquery-3.3.1.min.js"></script>
    <script src="../static/js/layer/layer.js"></script>
</head>

<body>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
    <div class="layadmin-user-login-main layui-tab layui-tab-brief" lay-filter="register">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2 style="font-size: 26px;">#(APP.name)</h2>
        </div>
        <ul class="layui-tab-title">
            <li class="layui-this">个人用户注册</li>
            <li>组织机构注册</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-username"
                           for="LAY-user-login-user-name"></label>
                    <input type="text" name="user.name" id="LAY-user-login-user-name"
                           placeholder="账号名称" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                           for="LAY-user-login-password"></label>
                    <input type="password" name="user.pwd" id="LAY-user-login-password" lay-verify="required"
                           placeholder="密码" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                           for="LAY-user-login-rePwd"></label>
                    <input type="password" name="rePwd" id="LAY-user-login-rePwd" lay-verify="required"
                           placeholder="确认密码" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-username"
                           for="LAY-user-login-person-name"></label>
                    <input type="text" name="person.name" id="LAY-user-login-person-name"
                           placeholder="姓名" class="layui-input" lay-verify="required">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-user" style="z-index: 10;"
                           for="LAY-user-login-sex"></label>
                    <select class="layadmin-user-login-icon layui-icon layui-icon-username" name="person.sex"
                            id="LAY-user-login-sex" lay-verify="required">
                        <option value="" selected="">性别</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-cellphone"
                           for="LAY-user-login-phone"></label>
                    <input type="text" name="person.phone" id="LAY-user-login-phone" lay-verify="phone" placeholder="手机"
                           class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-water"
                           for="LAY-user-login-email"></label>
                    <input type="email" name="user.email" id="LAY-user-login-email" lay-verify="email" placeholder="邮箱"
                           class="layui-input email">
                </div>
                <div class="layui-form-item">
                    <input type="checkbox" name="agreement" lay-skin="primary" title="同意用户协议">
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-reg-submit">注 册</button>
                </div>
                <div class="layui-trans layui-form-item layadmin-user-login-other">
                    <a href="#(ctxPath)/login" class="layadmin-user-jump-change layadmin-link layui-hide-xs">用已有帐号登录</a>
                    <a href="#(ctxPath)/login"
                       class="layadmin-user-jump-change layadmin-link layui-hide-sm layui-show-xs-inline-block">登录</a>
                </div>
            </div>
        </div>

        <div class="layui-tab-content" style="display: none;">
            <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-username"
                           for="LAY-organization-login-user-name"></label>
                    <input type="text" name="user.name" id="LAY-organization-login-user-name" lay-verify="required"
                           placeholder="账号名称" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                           for="LAY-organization-login-password"></label>
                    <input type="password" name="user.pwd" id="LAY-organization-login-password"
                           lay-verify="required|pass"
                           placeholder="密码" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                           for="LAY-organization-login-rePwd"></label>
                    <input type="password" name="rePwd" id="LAY-organization-login-rePwd" lay-verify="required"
                           placeholder="确认密码" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-username"
                           for="LAY-organization-login-name"></label>
                    <input type="text" name="organization.name" id="LAY-organization-login-name" lay-verify="required"
                           placeholder="组织机构名称" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-fonts-code"
                           for="LAY-organization-login-code"></label>
                    <input type="text" name="organization.code" id="LAY-organization-login-code"
                           placeholder="组织机构代码" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-dialogue"
                           for="LAY-organization-login-addr"></label>
                    <input type="text" name="organization.addr" id="LAY-organization-login-addr" lay-verify="required"
                           placeholder="组织机构地址" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-friends"
                           for="LAY-organization-login-principal"></label>
                    <input type="text" name="organization.principal" id="LAY-organization-login-principal"
                           lay-verify="required" placeholder="委办负责人姓名" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-cellphone"
                           for="LAY-organization-contact"></label>
                    <input type="text" name="organization.contact" id="LAY-organization-contact"
                           lay-verify="required|phone" placeholder="委办负责人手机号码" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-water"
                           for="LAY-organization-login-email"></label>
                    <input type="email" name="user.email" id="LAY-organization-login-email" lay-verify="required|email"
                           placeholder="邮箱" class="layui-input email">
                </div>
                <div class="layui-form-item">
                    <input type="checkbox" name="agreement" lay-skin="primary" title="同意用户协议">
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-organization-reg-submit">注 册
                    </button>
                </div>
                <div class="layui-trans layui-form-item layadmin-user-login-other">
                    <a href="#(ctxPath)/login" class="layadmin-user-jump-change layadmin-link layui-hide-xs">用已有帐号登录</a>
                    <a href="#(ctxPath)/login"
                       class="layadmin-user-jump-change layadmin-link layui-hide-sm layui-show-xs-inline-block">登录</a>
                </div>
            </div>
        </div>

    </div>
    <div class="layui-trans layadmin-user-login-footer">
    </div>
</div>

<script type="text/javascript">
    $('#LAY-user-login-user-name').on('mouseover', function() {
        layer.tips('5-25个字符，推荐使用中文，请勿包含姓名/身份证/银行卡等隐私信息，一旦设置成功无法修改', '#LAY-user-login-user-name', {
            tips: [2, '#5FB878'], time:10000,
            area: ['270px', 'auto']
        });
    });
    $('#LAY-user-login-password').on('mouseover', function() {
        layer.tips('6-20个字符，密码不能和账号名称相同<br>只能包含字母、数字以及标点符号（除空格）<br>字母、数字和标点符号至少包含2种', '#LAY-user-login-password', {
            tips: [2, '#5FB878'], time:10000,
            area: ['270px', 'auto']
        });
    });
    $('#LAY-user-login-rePwd').on('mouseover', function() {
        layer.tips('请再次输入你的密码', '#LAY-user-login-rePwd', {
            tips: [2, '#5FB878'], time:10000
        });
    });
    $('#LAY-user-login-person-name').on('mouseover', function() {
        layer.tips('请输入你的真实姓名', '#LAY-user-login-person-name', {
            tips: [2, '#5FB878'], time:10000
        });
    });
    $('#LAY-user-login-phone').on('mouseover', function() {
        layer.tips('手机号码（11位数字）', '#LAY-user-login-phone', {
            tips: [2, '#5FB878'], time:10000
        });
    });
    $('#LAY-user-login-email').on('mouseover', function() {
        layer.tips('在各邮件服务商处注册和经常使用的邮箱<br>邮箱长度最大为60个字符<br>例如：demo@qq.com', '#LAY-user-login-email', {
            tips: [2, '#5FB878'], time:10000,
            area: ['250px', 'auto']
        });
    });

    $('#LAY-organization-login-user-name').on('mouseover', function() {
        layer.tips('5-25个字符，推荐使用中文，请勿包含姓名/身份证/银行卡等隐私信息，一旦设置成功无法修改', '#LAY-organization-login-user-name', {
            tips: [2, '#5FB878'], time:10000,
            area: ['270px', 'auto']
        });
    });
    $('#LAY-organization-login-password').on('mouseover', function() {
        layer.tips('6-20个字符，密码不能和账号名称相同<br>只能包含字母、数字以及标点符号（除空格）<br>字母、数字和标点符号至少包含2种', '#LAY-organization-login-password', {
            tips: [2, '#5FB878'], time:10000,
            area: ['270px', 'auto']
        });
    });
    $('#LAY-organization-login-rePwd').on('mouseover', function() {
        layer.tips('请再次输入你的密码', '#LAY-organization-login-rePwd', {
            tips: [2, '#5FB878'], time:10000
        });
    });
    $('#LAY-organization-login-name').on('mouseover', function() {
        layer.tips('由4-50个字符构成的组织机构名称', '#LAY-organization-login-name', {
            tips: [2, '#5FB878'], time:10000,
            area: ['220px', 'auto']
        });
    });
    $('#LAY-organization-login-code').on('mouseover', function() {
        layer.tips('全国组织机构统一社会信用代码(选填)<br>由十八位的阿拉伯数字或大写英文字母组成<br>例如：91512081MA62K0260E', '#LAY-organization-login-code', {
            tips: [2, '#5FB878'], time:10000,
            area: ['270px', 'auto']
        });
    });
    $('#LAY-organization-login-addr').on('mouseover', function() {
        layer.tips('包含省市区县的详细组织机构注册所在地址<br>组织机构地址由3-128个字符构成<br>例如：贵州省贵阳市南明区**路**大厦', '#LAY-organization-login-addr', {
            tips: [2, '#5FB878'], time:10000,
            area: ['270px', 'auto']
        });
    });
    $('#LAY-organization-login-principal').on('mouseover', function() {
        layer.tips('组织机构的委办负责人的真实姓名，由2-20个字符构成', '#LAY-organization-login-principal', {
            tips: [2, '#5FB878'], time:10000
        });
    });
    $('#LAY-organization-contact').on('mouseover', function() {
        layer.tips('手机号码（11位数字）', '#LAY-organization-contact', {
            tips: [2, '#5FB878'], time:10000
        });
    });
    $('#LAY-organization-login-email').on('mouseover', function() {
        layer.tips('在各邮件服务商处注册和经常使用的邮箱<br>邮箱长度最大为60个字符<br>例如：demo@qq.com', '#LAY-organization-login-email', {
            tips: [2, '#5FB878'], time:10000,
            area: ['250px', 'auto']
        });
    });
</script>
#include("/template/common/include/_all_js.html")
<script type="text/javascript" src="#(RESOURCE_HOST)/static/js/mailCompletion.js"></script>
<script>
    layui.use(['form', 'element'], function () {
        var $ = layui.$,
            form = layui.form,
            element = layui.element;

        form.render();

        $(".email").each(function () {
            var mail = new hcMailCompletion($(this).attr("id"));
            mail.run();
        });
        //提交
        form.on('submit(LAY-user-reg-submit)', function (obj) {
            var field = obj.field;

            //确认密码
            if (field['user.pwd'] !== field.rePwd) {
                return layer.msg('两次密码输入不一致');
            }

            //是否同意用户协议
            if (!field.agreement) {
                return layer.msg('你必须同意用户协议才能注册');
            }

            // 个人机构注册
            util.sendAjax({
                type: 'POST',
                url: '#(ctxPath)/app/person/postRegister',
                data: field,
                loadFlag: true,
                success: function (data) {
                    layer.msg('注册成功，正在跳转！');
                    setTimeout(function () {
                        window.location.href = "#(ctxPath)/";
                    }, 500);
                },
                error: function (data) {
                    console.log(data);
                }
            });

            return false;
        });

        form.on('submit(LAY-organization-reg-submit)', function (obj) {
            var field = obj.field;

            //确认密码
            if (field['user.pwd'] !== field.rePwd) {
                return layer.msg('两次密码输入不一致');
            }

            //是否同意用户协议
            if (!field.agreement) {
                return layer.msg('你必须同意用户协议才能注册');
            }
            // 组织机构注册
            console.log(field);
            util.sendAjax({
                type: 'POST',
                url: '#(ctxPath)/app/organization/postRegister',
                data: field,
                loadFlag: true,
                success: function (data) {
                    layer.msg('注册成功，正在跳转！');
                    setTimeout(function () {
                        window.location.href = "/login";
                    }, 500);
                },
                error: function (data) {
                    console.log(data);
                }
            });
            return false;
        });

        element.on('tab(register)', function (data) {
            var index = data.index;
            if (index == 0) {
                $('.layui-tab-content').last().fadeToggle('normal', function () {
                    $('.layui-tab-content').first().fadeToggle('normal');
                });
            } else {
                $('.layui-tab-content').first().fadeToggle('normal', function () {
                    $('.layui-tab-content').last().fadeToggle('normal');
                });
            }
        });
    });
</script>

</body>

</html>